<template>
  <div class="footer-guide">
      <router-link to="/msite" class="guide-item" :class="{on: '/msite'=== $route.path}">
          <span class="item-icon">
              <i class="el-icon-platform-eleme"></i>
          </span>
          <span class="text">外卖</span>
      </router-link>
      <router-link to="/search" class="guide-item" :class="{on: '/search'=== $route.path}">
          <span class="item-icon">
              <i class="el-icon-search"></i>
          </span>
          <span class="text">搜索</span>
      </router-link>
      <router-link to="/order" class="guide-item" :class="{on: '/order'=== $route.path}">
          <span class="item-icon">
              <i class="el-icon-tickets"></i>
          </span>
          <span class="text">订单</span>
      </router-link>
      <router-link to="/personal" class="guide-item" :class="{on: '/personal'=== $route.path}">
          <span class="item-icon">
              <i class="el-icon-user-solid"></i>
          </span>
          <span class="text">我的</span>
      </router-link>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.footer-guide{
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid lightgray;
    z-index: 200;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    height: 50px;
    .guide-item{
        margin-top: 2px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .text{
            font-size: 12px;
            margin-top: 3px;
        }
        &.on{
            color: #02a774;
        }
    }
}
</style>